<template>
  <div></div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "pie",
  props: {
    width: {
      type: Number
    },
    height: {
      type: Number
    }
  },
  mounted() {
    const width = this.width,
      height = this.height;
    let svg = d3
      .select(this.$el)
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    let dataset = [30, 10, 43, 55, 13];
    // 定义一个布局
    let pie = d3.pie();
    let piedata = pie(dataset);
    // 5个整数被转换成了5个对象(Object),每个对象都有变量其实角度(startAngle)和终止角度(endAngle)
    // 绘制图形
    let arc = d3
      .arc() // 弧生成器
      .innerRadius(0) // 设置内半径
      .outerRadius(Math.min(width, height) * 0.4); // 设置外半径
    let color = d3.scaleOrdinal(d3.schemeCategory10); // 有十种颜色的颜色
    let arcs = svg
      .selectAll("g")
      .data(piedata)
      .enter()
      .append("g")
      .attr("transform", `translate(${width / 2}, ${height / 2})`);

    arcs
      .append("path")
      .attr("fill", function(d, i) { // d是每个对象
        return color(i);
      })      
      // .transition()  // 启动过度效果
      // .delay(function(d, i) {   //指定延迟的时间，表示一定时间后才开始转变，单位为毫秒。
      //   return i * 200;
      // })
      // .duration(20000)       // 表示过度时间持续0.2秒
      // .ease(d3.easeElasticInOut)   // 过度方式。linear:普通的线性变化，circle: 慢慢地到达变换的最终状态，elastic:带弹跳的到达最终状态，bounce:在最终状态处跳几次。
      .attr("d", function(d) {
        window.console.log(arc(d));
        return arc(d); // 调用弧生成器，得到路径值
      })
      // .attrTween("d", function(d) {
      //   // return arc(d); // 调用弧生成器，得到路径值
      //   window.console.log(d)
      //   let i = d3.interpolated(d.startAngle, d.endAngle);
      //   return function(t) {
      //     d.endAngle = i(t);
      //     return arc(d);
      //   }
      // })
    arcs
      .append("text")
      .attr("transform", function(d) {
        return `translate(${arc.centroid(d)})`;
      })
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.data;
      });
  }
};
</script>

<style scoped>
</style>

